<template>
	<u-popup v-model="show" mode="center" border-radius="24" :closeable="true" :mask-close-able="false">
		<view class="popupDom">
			<text class="titleDom">选择看房方式</text>
			<view class="inputDom">
				<view v-for="(item, index) in list" :key="index" class="userItem" @click="userClick(item)">
					<view class="left">
						<view>({{ item.nickName}})</view>
						<!-- <view class="text" style="font-size:24rpx">前往注册</view> -->
					</view>
					<view class="imgType">
						<image :src="item.img" mode="aspectFit" style="width: 170rpx;height: 125rpx;"></image>
					</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: "RolePopup",
		props: {
			// 父组件参数
			params: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				// 显隐
				show: false,
				// 弹窗样式
				popupStyle: {
					background: "rgba(0,0,0,0)"
				},
				list: [{
					nickName: '身份证看房',
					type: 2,
					img: require('@/static/img/sfz.png')
				}, {
					nickName: '押金看房',
					type: 3,
					img: require('@/static/img/yajin.png')
				}]
			};
		},
		created() {
			let user = uni.getStorageSync('user');
			if (!user.id) {
				uni.showModal({
					title: "提示",
					content: "您当前尚未登录",
					confirmText: "去登录",
					success(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: "/pages/tabBar/login/login"
							})
						}
					}
				})
				return;
			}
			// 打开弹窗
			this.show = true
			console.log(11111111111);
		},
		methods: {
			// 选择角色
			async userClick(item) {
				this.show = false
				console.log('点击获取', item);
				this.$emit('onClick', item)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.popupDom {
		width: 650rpx;
		height: 729rpx;
		padding: 40rpx 30rpx;
		display: flex;
		flex-direction: column;

		.titleDom {
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			text-align: center;
		}

		.inputDom {
			padding: 10rpx 20rpx;
			display: flex;
			flex-direction: column;

			.userItem {
				display: flex;
				align-items: center;
				padding: 0 20rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				margin: 20rpx 0rpx;
				height: 163rpx;
				background: #EDF3F1;
				border-radius: 16rpx;
				border: 1px solid #10C595;
				position: relative;

				.imgType {
					position: absolute;
					bottom: 0;
					right: 20rpx;
				}
			}

			.text {
				font-size: 13px;
				color: #00f;
				text-decoration: underline;
			}
		}


		.butt {
			display: flex;
			align-items: center;
			justify-content: center;

			.quxiao {
				width: 227rpx;
				height: 77rpx;
				background: #FFFFFF;
				border-radius: 38rpx;
				border: 1px solid #3878FE;
				font-size: 30rpx;
				color: #3878FE;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.qren {
				width: 226rpx;
				height: 76rpx;
				background: #3878FE;
				border-radius: 38rpx;
				font-size: 30rpx;
				color: #FFFFFF;
				margin-left: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}


	}
</style>